<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>星火编舟</title>
    <link rel="icon" type="image/png" href="../static/images/网页头_logo星火编舟.png">
    <link rel="stylesheet" type="text/css" href="../static/css/teacher.css">
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
    <title>学生成绩管理系统</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: white;
        }

        .header {
            position: relative;
            width: 100%;
            height: 55px;
            background-color: black;
        }

        .left {
            position: absolute;
            left: 20px;
            font-size: 20px;
            line-height: 55px;
            color: white;
            text-align: center;
        }

        .right {
            position: absolute;
            right: 160px;
            line-height: 55px;
            color: white;
            text-align: center;
        }

        .right_right {
            position: absolute;
            right: 24px;
            line-height: 55px;
            color: white;
            text-align: center;
        }

        .leftside {
            float: left;
            background-color: rgb(245, 245, 245);
            /* height: 663px; */
            width: 200px;
        }


        .leftside .first {
            background-color: rgb(66, 139, 202);
            margin-top: 25px;

        }

        .leftside .first a {
            color: white;

        }

        .leftside ul li {

            border-bottom: 0.2px solid white;

            font-size: 20px;
            height: 60px;
            line-height: 60px;
            width: 100%;
            text-align: center;
        }

        .leftside ul li a {
            color: black;
        }

        .container-fluid {
            position: relative;
            top: 35px;
            left: 70px;
        }

        /* .sub-header {
            margin-top: 35px;
        } */

        .table-responsive {

            margin-top: 10px;
        }

        /* .table-striped {

            width: 1250px;
        } */

        thead tr th {
            background-color: white;
        }



        tbody tr td select {
            height: 26px;
        }


        tbody tr td .long {
            width: 120px;
            height: 22px;
        }

        tbody tr td .last {
            height: 25px;
            width: 60px;
        }
    </style>
</head>

<body>
 <header>
        <nav>
            <ul>
                 <li><a href="http://127.0.0.1:5000/index2">主页</a></li>
                <li><a href="http://127.0.0.1:5000/Practical%20Courses2">实践课程</a></li>
                <li><a href="http://127.0.0.1:5000/One-on-one%20Tutoring2">一对一辅导</a></li>
                <li><a href="http://127.0.0.1:5000/student">教学管理</a></li>
                <li><a href="https://n1ks53vcj7t.feishu.cn/docx/R8GgdKk0io0DcRxPcTNckISnnNg?from=from_copylink" target="_blank">使用帮助</a></li>
                <li><a href="http://127.0.0.1:5000/About Us2">关于我们</a></li>

                <li><a href="/logout">注销</a></li>


            </ul>
        </nav>
    </header>

    <div class="leftside">
        <ul>
            <li><a href="/student">学生信息录入</a></li>
            <li><a href="/teacher">选课信息录入</a></li>
            <li><a href="/grade">成绩信息录入</a></li>
            <li class="first"><a href="#">学生成绩查询</a></li>
            <li><a href="/adminstator">系统管理员变动</a></li>
        </ul>
    </div>
    <div class="container-fluid">
        <h1 class="sub-header">学 生 成 绩 查 询 系 统</h1>&nbsp;&nbsp;
        <hr>
        <div class="table-responsive">
            <!--增加表单id标记,方便导出数据-->
            <table class="table table-striped" cellspaing="10" id="gradeTable">
                <!-- <thead>
                    
                </thead> -->
                <tbody>
                    <tr>
                        <form action="" method="post">
                            <td><label for="#">请选择查询的方式:(学号/姓名/课程号/所在班级)</label>&nbsp;&nbsp;&nbsp;</td>
                            <td><select name="selected_one">
                                    <option value="学号" selected="selected">学号</option>
                                    <option value="姓名">姓名</option>
                                    <option value="课程号">课程号</option>
                                    <option value="所在班级">所在班级</option>
                                </select></td>&nbsp;
                            <td><input class="long" type="text" name="query"></td>
                            <td><!-- 添加导出按钮 -->
                            <button onclick="exportToCSV()">导出成绩列表</button></td>
                            <td><input class="last" type="submit" value="查询" /></td>
                            <td><span>查询结果:{{query_result}}</span></td>
                        </form>
                    </tr>
                    <tr>
                        <td>学生学号</td>
                        <td>课程号</td>
                        <td>成绩</td>
                    </tr>
                    {% for result in results %}
                    <tr>
                        <td>{{result[0]}}</td>
                        <td>{{result[1]}}</td>
                        <td>{{result[2]}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>


</body>

<script>
    // 导出成绩列表到 CSV
    function exportToCSV() {
        // 获取成绩列表的数据，可以使用 JavaScript 获取表格中的数据
        var table = document.getElementById('gradeTable');
        var rows = table.getElementsByTagName('tr');
        
        // 创建 CSV 数据
        var csvContent = "学生学号,课程号,成绩\n"; // CSV 文件的列头

        for (var i = 2; i < rows.length; i++) { // 从第三行开始，遍历每一行
            var cells = rows[i].getElementsByTagName('td');
            var studentId = cells[0].innerText;
            var courseId = cells[1].innerText;
            var grade = cells[2].innerText;

            // 将数据添加到 CSV 中
            csvContent += studentId + "," + courseId + "," + grade + "\n";
        }

        // 创建一个 Blob（二进制大对象）以便下载
        var blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        var link = document.createElement("a");

        // 创建下载链接
        if (link.download !== undefined) {
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", "grades.csv");
            link.style.visibility = 'hidden';
            document.body.appendChild(link);//add a tag
            link.click();//点击下载链接
            document.body.removeChild(link);//delete a tag
        }
    }
</script>

</html>